<template>

  <div class="app-container">
    <div><h2 style="text-align: center;">章节信息</h2></div>

    <el-form label-width="120px" style="padding: 30px 0;margin-right: 20%;margin-left: 20%;">
      <div>
        <div style="text-align: center;margin-bottom: 5%">
          <el-button type="primary" @click="openChapterDialog">添加章节</el-button>
        </div>

        <!-- 章节 -->
        <ul class="chanpterList" style="margin-bottom: 5%">
          <li style="margin-bottom: 5%"
              v-for="chapter in chapterVideoList"
              :key="chapter.id">
            <p style="padding-left: 5%;padding-right: 5%">
              {{ chapter.title }}
              <span class="acts">
                <el-button type="text" @click="openVideo(chapter.id)">添加课时</el-button>
                <el-button style="" type="text" @click="editChapter(chapter.id)">编辑</el-button>
                <el-button type="text" @click="removeById(chapter.id)">删除</el-button>
            </span>
            </p>
            <!-- 视频 -->
            <ul class="chanpterList videoList" style="margin-right: 5%">
              <li
                v-for="video in chapter.videos"
                :key="video.id">
                <p style="padding-left: 5%;padding-right: 5%">{{ video.title }}
                  <span class="acts">
                        <el-button type="text" @click="editVideo(video.id)">编辑</el-button>
                        <el-button type="text" @click="removeVideoById(video.id)">删除</el-button>
                    </span>
                </p>
              </li>
            </ul>
          </li>
        </ul>
      </div>

      <el-form-item style="text-align: center;margin-left: -15%;">
        <el-button plain="true" type="primary" @click="previous">上一步</el-button>
        <el-button :disabled="saveBtnDisabled" plain="true" type="success" @click="save">保存</el-button>
      </el-form-item>
    </el-form>

    <!-- 添加和修改章节表单 -->
    <el-dialog :visible.sync="dialogChapterFormVisible" title="添加章节" style="margin-right: 20%;margin-left: 20%">
      <el-form :model="chapter" label-width="120px">
        <el-form-item label="章节标题" style="margin-right: 10%">
          <el-input v-model="chapter.title"/>
        </el-form-item>
        <el-form-item label="章节排序">
          <el-input-number v-model="chapter.sort" :min="1" controls-position="right"/>
        </el-form-item>
      </el-form>
         
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="dialogChapterFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 添加和修改课时表单 -->
    <el-dialog :visible.sync="dialogVideoFormVisible" title="添加课时">
      <el-form :model="video" label-width="120px">
        <el-form-item label="课时标题">
          <el-input v-model="video.title"/>
        </el-form-item>

        <el-form-item label="课时排序">
          <el-input-number v-model="video.sort" :min="1" controls-position="right"/>
        </el-form-item>

        <el-form-item label="上传视频">
          <el-upload
            :on-success="handleVodUploadSuccess"
            :on-exceed="handleUploadExceed"
            :before-remove="handleBeforeRemove"
            :on-remove="handleOnRemove"
            :file-list="fileList"
            :action="BASE_API+'/aliyun-service/uploadVideo'"
            :limit="1"
            class="upload-demo">
            <el-button size="small" type="primary" :disabled="uplodaButton">上传视频</el-button>
            <el-tooltip placement="right-end">
              <div slot="content">最大支持1G，<br>
                支持3GP、ASF、AVI、DAT、DV、FLV、F4V、<br>
                GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br>
                MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br>
                SWF、TS、VOB、WMV、WEBM 等视频格式上传
              </div>
              <i class="el-icon-question"/>
            </el-tooltip>
          </el-upload>

          <el-button size="small" @click="saveVideoBtnDisabled = false,uplodaButton = true">无视频</el-button>
        </el-form-item>
      </el-form>
       
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVideoFormVisible = false">取 消</el-button>
        <el-button :disabled="saveVideoBtnDisabled" type="primary" @click="saveOrUpdateVideo">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
  import chapterApi from '@/api/chapter'
  import videoApi from '@/api/video'
  import aliyunApi from '@/api/aliyun'

  export default {
    data() {
      return {
        saveBtnDisabled: false, // 保存按钮是否禁用
        chapterVideoList: [],
        courseId: '',
        chapter: {
          title: '',
          sort: 0,
          courseId: '',
          id: ''
        },
        video: {
          sort: 0,
          isFree: false,
          chapterId: '',
          id: '',
          courseId: '',
          title: '',
          videoSourceId: '',
          videoOriginalName: ''
        },
        dialogChapterFormVisible: false,
        dialogVideoFormVisible: false,
        saveVideoBtnDisabled: false,
        fileList: [],//上传文件列表
        BASE_API: process.env.BASE_API, // 接口API地址
        uplodaButton: false
      }
    },

    created() {
      if (this.$route.params && this.$route.params.id) {
        this.courseId = this.$route.params.id
        this.chapter.courseId = this.$route.params.id
        this.getChapter()
      }
    },

    methods: {
      //编辑小节
      editVideo(id) {
        this.fileList = []
        this.saveVideoBtnDisabled = true
        this.uplodaButton = false
        videoApi.getVideoById(id)
          .then(response => {
            this.video = response.data.item
            // 回显
            if (this.video.videoId) {
              this.fileList = [{ 'name': this.video.videoName }]
            }
          })
        this.dialogVideoFormVisible = true
      },

      //小节弹窗
      openVideo(chapterId) {
        this.saveVideoBtnDisabled = true
        this.uplodaButton = false
        this.dialogVideoFormVisible = true
        this.video.chapterId = chapterId
        this.video.sort = 1
        this.video.courseId = this.chapter.courseId
        this.video.title = ''
        this.video.id = ''
        this.fileList = []
      },

      //章节弹窗
      openChapterDialog() {
        this.dialogChapterFormVisible = true
        this.chapter.title = ''
        this.chapter.sort = 0
        this.chapter.id = ''
      },

      //根据课程id查询章节
      getChapter() {
        chapterApi.getChapterInfo(this.courseId)
          .then(response => {
            this.chapterVideoList = response.data.list
          })
      },

      //根据id查询章节
      editChapter(id) {
        chapterApi.getChapterById(id)
          .then(response => {
            this.chapter = response.data.item
          })
        this.dialogChapterFormVisible = true
      },

      saveOrUpdate() {
        if (this.chapter.id) {
          this.updateChapter()
        } else {
          this.addChapter()
        }
      },

      //添加章节
      addChapter() {
        chapterApi.addChapter(this.chapter)
          .then(response => {
            //提示信息
            this.$message({
              type: 'success',
              message: '添加章节信息成功'
            })
            this.dialogChapterFormVisible = false
            this.getChapter()
          })
      },

      //修改章节
      updateChapter() {
        chapterApi.updateChapter(this.chapter)
          .then(response => {
            //提示信息
            this.$message({
              type: 'success',
              message: '修改章节信息成功'
            })
            this.dialogChapterFormVisible = false
            // 刷新页面
            this.getChapter()
          })
      },

      //删除章节信息
      removeById(id) {
        // 询问是否删除
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return chapterApi.deleteChapter(id)
        }).then(response => {
          // 刷新页面
          this.getChapter()
          // 弹出成功提示
          this.$message({
            message: response.message,
            type: 'success'
          })
        })
      },

      saveOrUpdateVideo() {
        if (this.video.id) {
          this.updateVideo()
        } else {
          this.addVideo()
        }
      },

      //添加小节
      addVideo() {
        videoApi.addVideo(this.video)
          .then(response => {
            //提示信息
            this.$message({
              type: 'success',
              message: '添加课时信息成功'
            })
            this.dialogVideoFormVisible = false
            this.getChapter()
          })
      },

      //修改小节
      updateVideo() {
        videoApi.updateVideo(this.video)
          .then(response => {
            //提示信息
            this.$message({
              type: 'success',
              message: '修改课时信息成功'
            })
            this.dialogVideoFormVisible = false
            // 刷新页面
            this.getChapter()
          })
      },

      //删除小节信息
      removeVideoById(id) {
        // 询问是否删除
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //删除数据库
          return videoApi.deleteVideo(id)
        }).then(response => {
          // 刷新页面
          this.getChapter()
          // 弹出成功提示
          this.$message({
            message: response.message,
            type: 'success'
          })
        })
      },

      //成功上传
      handleVodUploadSuccess(response, file, fileList) {
        this.saveVideoBtnDisabled = false
        if (response.success) {
          this.video.videoId = response.data.id
          this.video.videoUrl = response.data.url
          this.video.videoName = file.name
        } else {
          this.$message.error('上传失败（非20000）')
        }
      },

      //视图上传多于一个视频
      handleUploadExceed(files, fileList) {
        this.$message.warning('想要重新上传视频，请先删除已上传的视频')
      },

      // 删除视频文件确认
      handleBeforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`)
      },

      // 删除视频
      handleOnRemove(file, fileList) {
        if (!this.video.videoId) {
          return
        }

        aliyunApi.deleteVideo(this.video.videoId).then(response => {
          // 删除视频的同时更新video数据信息
          this.video.videoId = ''
          this.video.videoName = ''
          this.video.videoUrl = ''
          this.fileList = []
          videoApi.updateVideo(this.video)
          this.$message.success(response.message)
        })
      },

      save() {
        this.$router.push({ path: '/course/index/' })
      },
      previous() {
        this.$router.push({ path: '/course/courseInfo/' + this.courseId })
      }
    }
  }
</script>
<style scoped>
  .chanpterList {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .chanpterList li {
    position: relative;
  }

  .chanpterList p {
    border-radius: 15px;
    font-size: 20px;
    margin: 5px 0;
    padding: 10px;
    height: 70px;
    line-height: 50px;
    width: 100%;
    border: 1px solid #DDD;
  }

  .chanpterList .acts {
    float: right;
    font-size: 14px;
  }

  .videoList {
    padding-left: 50px;
  }

  .videoList p {
    border-radius: 10px;
    font-size: 14px;
    margin: 10px 0;
    padding: 10px;
    height: 50px;
    line-height: 30px;
    width: 100%;
    border: 1px dotted #DDD;
  }
</style>

